<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>美丽说首页</title>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<style>
		*{
			margin:0;
			padding:0;
			list-style:none;
		}
		body{
			font-size:12px;
			font-family:Arial;
		}

		a:hover{
			cursor:pointer;		
			color:#f69;
		}
		.topbar a:hover{
			position:relative;
			top:2px;
			left:2px;
		}

		a{
			text-decoration:none;
			color:black;
		}
		
		.topbar{
			border-bottom:1px solid #ccc;
			height:30px;
			width:100%;
			margin:0 auto;
		}
		.topbar ul{
			width:1200px;
			margin:0 auto;
		}
		.topbar ul li{
			float:right;
			border-right:1px dotted #ccc;
			height:20px;
			line-height:20px;
			font-size:12px;
			margin:5px auto;
			margin-left:15px;
		} 

		
		.search{
			width:1200px;
			height:120px;
			margin:0 auto;	
		}
		.search img{
			margin-top:34px;
			float:left;
		}

		.search123{
			float:left;
			margin:19px 140px;
		}

		.search1{
			width:520px;
			height:24px;
		}
		.search2{
			width:520px;
			height:32px;
			background:#FF6699;
			
		}
		.search3{
			width:520px;
			height:26px;
			
		}

		.baobei{
			float:left;
			width:50px;
			height:24px;
			line-height:24px;
			text-align:center;
			background:#FF6699;
		}

		.input_submit,.dianpu:hover,.baobei:hover{
			cursor:pointer;
		}

		.dianpu{
			float:left;
			width:50px;
			height:24px;
			line-height:24px;
			text-align:center;
			background:#F2F2F2;
		}

		.input_text{
			width:449px;
			height:28px;
			border:2px solid #FF6699;
		}

		.search2 ul li{
			float:left;
		}

		.search2 ul li input[type="submit"]{
			width:67px;
			height:32px;
			background:#FF6699;
			border:0px solid #FF6699;
			color:white;
		}

		.search3 ul li{
			float:left;
			line-height:26px;
		}

		.nav{
			border-bottom:1px solid #FF6699;
		}

		.nav ul{
			width:1200px;
			height:50px;
			margin:0 auto;
		}

		.nav ul li{
			float:left;
			margin-left:20px;
			margin-right:25px;
			font-size:14px;
			font-weight:bolder;
			height:50px;
			line-height:50px;
		}
		/*.genduo_li{
			display:none;
			width:80px;
			background:red;
			position:absolute;
			left:670px;
			top:200px;
			z-index:10000;
		}*/
		.genduo_li li{
			height:30px;
			position:relative;
			top:-1px;
			
		}

		.content_zong{
			width:100%;
			height:;
		}

		.content{
			width:1200px;
			height:560px;
			/*background:red;*/
			margin:0 auto;
		}
		.fenlei{
			width: 288px;
			height: 558px;
			float:left;
			background: #F9f9f9;
			
			border: 1PX solid #EEEEEE;
		}
		.fenlei ul {
			overflow: hidden;
		}
		.fenlei ul li {
			overflow: hidden;
			height: 72px;
			border-bottom: 1px solid #EEEEEE;
		}
		.fenleiLeft {
			overflow: hidden;
		}
		.fenleiLeft dt {
			width: 40px;
			height: 64px;
			float: left;
			padding: 15px 0 0 15px;
			font-size: 14px;
			font-weight: bold;
		}
		.fenleiLeft dd {
			float: left;
			width: 220px;
			overflow: hidden;
		}
		.fenleiLeft dd a {
			margin: 15px 0 0 12px;
			float: left;
		}
		.fenleiLeft dd a:hover{
			color: #f69;
		}

		.content_right{
			float:right;
			width:910px;
			height:510px;
		}
		.image1234{
			width:910px;
			height:162px;
			float:right;
		}
		.content_zong2{
			width:100%;
			height:;
			margin-top:40px;
		}
		.content_goods_logo{
			width:1200px;
			height:500px;
			/*background:red;*/
			margin:0 auto;
		}
		.cate_top1{
			width:100px;
			height:40px;
			float:left;
			margin-right:10px;
			font-size:20px;
			font-weight:bolder;
		}
		.cate_top2{
			width:px;
			height:40px;
			float:left;
			margin-right:10px;
		}	
		.cate_top3{
			width:980px;
			height:40px;
			float:left;
			border-bottom:1px solid #ccc;
			float:right;
		}
		.cate_bottom{
			width:100%;
			height:340px;
			background:green;
			float:left;
			margin-top:20px;
		}
		.goods_logo{
			width:230px;
			height:340px;
			background:red;
			margin-left:5px;
			margin-right:5px;
			float:left;
		}
		.footer_zong{
			width:100%;
			height:;
			margin-top:40px;
		}
		.footer{
			width:1200px;
			height:;
			margin:0 auto;
		}
	</style>
	<script type="text/javascript">
	    $(function(){
	        $('.navRight li').mouseenter(function(){
	            $(this).children('span').css('transform','rotate(135deg)');
	        }).mouseleave(function(){
	            $(this).children('span').css('transform','rotate(-45deg)');
	        })
	        $('.fenlei ul li').mouseenter(function(){
	            $(this).stop().animate({'height':'289px'},300).siblings().stop().animate({'height':'44px'},300);
	            $(this).siblings().css('background','#F5F5F5');
	            $('.fenleiright').fadeTo(0,0.8).stop().animate({'width':'289px'},300);
	        }).mouseleave(function(){
	            $('.fenlei ul li').stop().animate({'height':'72px'},300)
	            $(this).siblings().css('background','#ffffff');
	        });
	        $('.navLeft').mouseleave(function(){
	            $('.fenleiright').stop().animate({'width':'0px'},300);
	        })
	    })
	</script>
	<link rel="stylesheet" type="text/css" href="css/jquery.slider.css" />

	<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.slider.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function ($) {
		$(".slider").slideshow({
			width: 910,
			height: 398,
			transition: ['bar', 'Rain', 'square', 'squareRandom', 'explode']
		});
	});
	</script>
</head>
<body>
	<!-- 头部start -->
	<div class="header">
		<!-- 头部第一部分 start -->
		<div class="topbar">
			<ul>
				<li style="border:0px solid #FF6699;"><a href="">&nbsp;帮助中心&nbsp;</a></li>
				<li><a href="">&nbsp;下载app&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
				<li><a href="">&nbsp;我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
				<li><a href="">&nbsp;我的购物车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
				<li><a href="">&nbsp;注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
				<li><a href="">&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
				<li><a href="">&nbsp;QQ登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
				<li><a href="">&nbsp;微信登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
			</ul>
		</div>
		<!-- 头部第一部分 end -->
		<!-- 头部第二部分 search start -->
		<div class="search">
			<form action="" method="">
			<img src="./pic/735e2614e3911e621f0446e54597_204_52.c5.png">
			<div class="search123">	
				<div class="search1">
					<div class="baobei">宝贝</div>
					<div class="dianpu">店铺</div>
				</div>
				<div class="search2">
					<ul>
						<li><input type="text" class="input_text" ></li>
						<li><input type="submit" class="input_submit" value="搜索"></li>
					</ul>
				</div>
				<div class="search3">
					<ul>
						<li><a href="" style="color:#FF6699;">连衣裙&nbsp;</a></li>
						<li><a href="">&nbsp;拖鞋&nbsp;</a></li>
						<li><a href="">&nbsp;短裤&nbsp;</a></li>
						<li><a href="" style="color:#FF6699;">&nbsp;套装&nbsp;</a></li>
						<li><a href="">&nbsp;泳衣&nbsp;</a></li>
						<li><a href="">&nbsp;长裙&nbsp;</a></li>
						<li><a href="">&nbsp;睡衣&nbsp;</a></li>
						<li><a href="" style="color:#FF6699;">&nbsp;凉鞋&nbsp;</a></li>
						<li><a href="">&nbsp;双肩包&nbsp;</a></li>
						<li><a href="">&nbsp;帽子&nbsp;</a></li>
					</ul>
				</div>
			</div>
			</form>
		</div>
		<!-- 头部第二部分 search end -->
		<div class="nav">
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">最热</a></li>
				<li><a href="">上衣</a></li>
				<li><a href="">裙子</a></li>
				<li><a href="">裤子</a></li>
				<li><a href="">鞋子</a></li>
				<li><a href="">包包</a></li>
				<li><a href="">配饰</a></li>
				<li class="genduo"><a href="">更多</a></li>	
				<li class="hi"><a href="" style="color:#FF6699;">Hi范儿</a></li>
			</ul>
		</div>
		<!-- 隐藏的li -->
		<div class="genduo_li">
			<ul>
				<li><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
				<li><a href="">4</a></li>
				<li><a href="">5</a></li>
				<li><a href="">6</a></li>
				<li><a href="">7</a></li>
				<li><a href="">8</a></li>
				<li><a href="">9</a></li>
				<li><a href="">10</a></li>
				<li><a href="">11</a></li>
			</ul>
		</div>
	</div>
	<!-- 头部end -->
	<!-- 中start -->
	<div class="content_zong">
		<div class="content">
			<div class="content_left">
				<div class="fenlei">
	                <ul>
	                    <li>
	                         <dl class="fenleiLeft">
	                            <dt>男人</dt>
	                            <dd>
	                                <a href="#">男外套</a>
	                                <a href="#">男鞋</a>
	                                <a href="#">男裤</a>
	                                <a href="#">衬衫</a>
	                                <a href="#">手表</a>
	                                <a href="#">男卫衣</a>
	                                <a href="#">打底衫</a>
	                                <a href="#">山地车</a>
	                                <a href="#">男皮带</a>
	                                <a href="#">旅行箱</a>
	                                <a href="#">包</a>
	                                <a href="#">睡衣男</a>
	                                <a href="#">运动鞋</a>
	                                <a href="#">裤袜</a>
	                                <a href="#">书包</a>
	                                <a href="#">海竿</a>
	                                <a href="#">运动裤</a>
	                                <a href="#">腰带男</a>
	                                <a href="#">男T恤</a>
	                                <a href="#">乔丹4代</a>
	                                <a href="#">情侣装</a>
	                                <a href="#">棒球服</a>
	                                <a href="#">男保暖裤</a>
	                                <a href="#">源码之家</a>
	                            </dd>
	                         </dl>
	                    </li>
	                    <li>
	                         <dl class="fenleiLeft">
	                            <dt>美食</dt>
	                            <dd>
	                                <a href="#">男鞋</a><a href="#">男裤</a>
	                                <a href="#">手表</a><a href="#">男卫衣</a>
	                                <a href="#">nb男鞋</a><a href="#">打底衫</a>
	                                <a href="#">拖鞋</a><a href="#">睡衣</a>
	                                <a href="#">男运动鞋</a><a href="#">山地车</a>
	                                <a href="#">男皮带</a>
	                                <a href="#">运动裤</a><a href="#">男棉裤</a>
	                                <a href="#">以纯男T恤包</a><a href="#">情侣装</a>
	                                <a href="#">男保暖裤</a><a href="#">运动鞋</a>
	                                <a href="#">男乔丹4代跑鞋</a>
	                                <a href="#">腰带</a><a href="#">男旅行箱</a>
	                                <a href="#">气垫鞋</a><a href="#">板鞋</a>
	                                <a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
	                                <a href="#">皮衣潮男装</a>
	                            </dd>
	                         </dl>
	                    </li>
	                    <li>
	                         <dl class="fenleiLeft">
	                            <dt>女人</dt>
	                            <dd>
	                                <a href="#">男鞋</a><a href="#">男裤</a>
	                                <a href="#">手表</a><a href="#">男卫衣</a>
	                                <a href="#">nb男鞋</a><a href="#">打底衫</a>
	                                <a href="#">拖鞋</a><a href="#">睡衣</a>
	                                <a href="#">男运动鞋</a><a href="#">山地车</a>
	                                <a href="#">男皮带</a>
	                                <a href="#">运动裤</a><a href="#">男棉裤</a>
	                                <a href="#">以纯男T恤包</a><a href="#">情侣装</a>
	                                <a href="#">男保暖裤</a><a href="#">运动鞋</a>
	                                <a href="#">男乔丹4代跑鞋</a>
	                                <a href="#">腰带</a><a href="#">男旅行箱</a>
	                                <a href="#">气垫鞋</a><a href="#">板鞋</a>
	                                <a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
	                                <a href="#">皮衣潮男装</a>
	                            </dd>
	                         </dl>
	                    </li>
	                    <li>
	                         <dl class="fenleiLeft">
	                            <dt>数码</dt>
	                            <dd>
	                                <a href="#">男鞋</a><a href="#">男裤</a>
	                                <a href="#">手表</a><a href="#">男卫衣</a>
	                                <a href="#">nb男鞋</a><a href="#">打底衫</a>
	                                <a href="#">拖鞋</a><a href="#">睡衣</a>
	                                <a href="#">男运动鞋</a><a href="#">山地车</a>
	                                <a href="#">男皮带</a>
	                                <a href="#">运动裤</a><a href="#">男棉裤</a>
	                                <a href="#">以纯男T恤包</a><a href="#">情侣装</a>
	                                <a href="#">男保暖裤</a><a href="#">运动鞋</a>
	                                <a href="#">男乔丹4代跑鞋</a>
	                                <a href="#">腰带</a><a href="#">男旅行箱</a>
	                                <a href="#">气垫鞋</a><a href="#">板鞋</a>
	                                <a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
	                                <a href="#">皮衣潮男装</a>
	                            </dd>
	                         </dl>
	                    </li>
	                    <li>
	                         <dl class="fenleiLeft">
	                            <dt>家具</dt>
	                            <dd>
	                                <a href="#">男鞋</a><a href="#">男裤</a>
	                                <a href="#">手表</a><a href="#">男卫衣</a>
	                                <a href="#">nb男鞋</a><a href="#">打底衫</a>
	                                <a href="#">拖鞋</a><a href="#">睡衣</a>
	                                <a href="#">男运动鞋</a><a href="#">山地车</a>
	                                <a href="#">男皮带</a>
	                                <a href="#">运动裤</a><a href="#">男棉裤</a>
	                                <a href="#">以纯男T恤包</a><a href="#">情侣装</a>
	                                <a href="#">男保暖裤</a><a href="#">运动鞋</a>
	                                <a href="#">男乔丹4代跑鞋</a>
	                                <a href="#">腰带</a><a href="#">男旅行箱</a>
	                                <a href="#">气垫鞋</a><a href="#">板鞋</a>
	                                <a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
	                                <a href="#">皮衣潮男装</a>
	                            </dd>
	                         </dl>
	                    </li>
	                    <li>
	                         <dl class="fenleiLeft">
	                            <dt>母婴</dt>
	                            <dd>
	                                <a href="#">男鞋</a><a href="#">男裤</a>
	                                <a href="#">手表</a><a href="#">男卫衣</a>
	                                <a href="#">nb男鞋</a><a href="#">打底衫</a>
	                                <a href="#">拖鞋</a><a href="#">睡衣</a>
	                                <a href="#">男运动鞋</a><a href="#">山地车</a>
	                                <a href="#">男皮带</a>
	                                <a href="#">运动裤</a><a href="#">男棉裤</a>
	                                <a href="#">以纯男T恤包</a><a href="#">情侣装</a>
	                                <a href="#">男保暖裤</a><a href="#">运动鞋</a>
	                                <a href="#">男乔丹4代跑鞋</a>
	                                <a href="#">腰带</a><a href="#">男旅行箱</a>
	                                <a href="#">气垫鞋</a><a href="#">板鞋</a>
	                                <a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
	                                <a href="#">皮衣潮男装</a>
	                            </dd>
	                         </dl>
	                    </li>
	                    <li>
	                         <dl class="fenleiLeft">
	                            <dt>美妆</dt>
	                            <dd>
	                                <a href="#">男鞋</a><a href="#">男裤</a>
	                                <a href="#">手表</a><a href="#">男卫衣</a>
	                                <a href="#">nb男鞋</a><a href="#">打底衫</a>
	                                <a href="#">拖鞋</a><a href="#">睡衣</a>
	                                <a href="#">男运动鞋</a><a href="#">山地车</a>
	                                <a href="#">男皮带</a>
	                                <a href="#">运动裤</a><a href="#">男棉裤</a>
	                                <a href="#">以纯男T恤包</a><a href="#">情侣装</a>
	                                <a href="#">男保暖裤</a><a href="#">运动鞋</a>
	                                <a href="#">男乔丹4代跑鞋</a>
	                                <a href="#">腰带</a><a href="#">男旅行箱</a>
	                                <a href="#">气垫鞋</a><a href="#">板鞋</a>
	                                <a href="#">温暖一家之主De冬日风采</a><a href="#">羽绒服羽绒服中的小立领</a>
	                                <a href="#">皮衣潮男装</a>
	                            </dd>
	                         </dl>
	                    </li>
	                </ul>
	            </div>
	        </div>
			<div class="content_right">
				<!-- 代码 开始 -->
				<div>
					<div class="slider">
						<div><a href="#"><img src="images/4457a0cb190cef4ef80983b34e54_960_420.c5.jpg" alt=""></a></div>
						<div><a href="#"><img src="images/606f75fa4da5b48f15f4e81a92b0_960_420.c5.jpg" alt=""></a></div>
						<div><a href="#"><img src="images/e484e20c93ec77435581c6eaaeef_960_420.c5.jpg" alt=""></a></div>
					
					</div>
				</div>
				<div class="image1234">
					<div class="iamge_1" style="width:220px;height:150px;background:pink;float:left;margin-top:12px;"><a href="#"><img src="./pic/2016-06-24_192538.png"></a></div>
					<div class="iamge_2" style="width:220px;height:150px;background:pink;float:left;margin-top:12px;margin-left:10px;"><a href="#"><img src="./pic/2016-06-24_192725.png"></a></div>
					<div class="iamge_3" style="width:220px;height:150px;background:pink;float:left;margin-top:12px;margin-left:10px;"><a href="#"><img src="./pic/2016-06-24_192925.png"></a></div>
					<div class="iamge_4" style="width:220px;height:150px;background:pink;float:left;margin-top:12px;margin-left:10px;"><a href="#"><img src="./pic/2016-06-24_192836.png"></a></div>
				</div>				
			</div>
		</div>
	</div>
	<div class="content_zong2">
		<div class="content_goods_logo">
			<div class="cate">
				<div class="cate_top">
					<div class="cate_top1" style=""><br>正在流行</div>
					<div class="cate_top2" style=""><br><br>流行元素 权威榜单</div>
					<div class="cate_top3" style=""></div>
				</div>
				<div class="cate_bottom" style="">
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>			
				</div>
			</div>
			<div class="cate">
				<div class="cate_top">
					<div class="cate_top1" style=""><br>正在流行</div>
					<div class="cate_top2" style=""><br><br>流行元素 权威榜单</div>
					<div class="cate_top3" style=""></div>
				</div>
				<div class="cate_bottom" style="">
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>			
				</div>
			</div>
			<div class="cate">
				<div class="cate_top">
					<div class="cate_top1" style=""><br>正在流行</div>
					<div class="cate_top2" style=""><br><br>流行元素 权威榜单</div>
					<div class="cate_top3" style=""></div>
				</div>
				<div class="cate_bottom" style="">
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>			
				</div>
			</div>
			<div class="cate">
				<div class="cate_top">
					<div class="cate_top1" style=""><br>正在流行</div>
					<div class="cate_top2" style=""><br><br>流行元素 权威榜单</div>
					<div class="cate_top3" style=""></div>
				</div>
				<div class="cate_bottom" style="">
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>
					<div class="goods_logo" style=""></div>			
				</div>
			</div>	
		</div>
	</div>

	<div class="footer_zong">
		<div class="footer">
			<div>友情连接：</div>
			<div>
				Copyright ©2016 Meilishuo.com  电信与信息服务业务经营许可证100798号 经营性网站备案信息  京ICP备11031139号  京公网安备110108006045<br> 
				客服电话：4000-800-577  文明办网文明上网举报电话：010-82615762  违法不良信息举报中心 我最喜爱的人民警察评选 反诈骗信息
			</div>
		</div>
	</div>

	<script>
		// alert($);
		//搜索宝贝店铺
		$('.baobei').on('click',function(){
			$('.baobei').css('background','#F69');
			$('.baobei').css('color','white');
			$('.dianpu').css('background','#f2f2f2');
			$('.dianpu').css('color','black');
			$('.input_text').attr('name','baobei');
		});
		$('.dianpu').on('click',function(){
			$('.baobei').css('background','#f2f2f2');
			$('.baobei').css('color','black');
			$('.dianpu').css('background','#f69');
			$('.dianpu').css('color','white');
			$('.input_text').attr('name','dianpu');
		})

		//隐藏的 更多 模块的属性
		var t =$('.genduo').offset().top + 50;
		var l =$('.genduo').offset().left -25;
		$('.genduo_li').css('display','none');
		$('.genduo_li').css('width','80px');
		$('.genduo_li').css('height','30px');
		$('.genduo_li').css('line-height','30px');
		$('.genduo_li').css('text-align','center');
		$('.genduo_li').css('position','absolute');
		$('.genduo_li').css('top',t);
		$('.genduo_li').css('left',l);
		$('.genduo_li').css('z-index','100000');
		$('.genduo_li').css('border','1px solid white');
		$('.genduo_li ul li').css('background','white');

		//鼠标移入移出  更多 时的事件	
		$('.genduo').on('mouseover',function(){
			$('.genduo_li').css('display','block')
		});
		$('.genduo').on('mouseout',function(){
			$('.genduo_li').css('display','none')
		});
		$('.genduo_li').on('mouseover',function(){
			$('.genduo_li').css('display','block')
		});
		$('.genduo_li').on('mouseout',function(){
			$('.genduo_li').css('display','none')
		});

		$('.genduo_li ul li').on('mouseover',function(){
			$(this).css('background','#f2f0f0');
		});
		$('.genduo_li ul li').on('mouseout',function(){
			$(this).css('background','white');
		});
		$('.hi').on('mouseover',function()
		{
			$('.hi a').css('style','color:red;');
		})
	</script>
</body>
</html>